import React ,{useState,useEffect}from 'react'
import { Table, Tag, Space } from 'antd';
import axios from 'axios';
import My_pagination from './My_pagination';
const columns = [
    {
        title: 'key',
        dataIndex: 'key',
        key: 'key',
        render: text => <a>{text}</a>,
      },
    {
      title: 'Name',
      dataIndex: 'name',
      key: 'name',
      render: text => <a>{text}</a>,
    },
    {
      title: 'Age',
      dataIndex: 'age',
      key: 'age',
    },
    {
      title: 'Address',
      dataIndex: 'city',
      key: 'address',
    },

    {
      title: 'Action',
      key: 'action',
      render: (text, record) => (
        <Space size="middle">
          <a>edit</a>
          <a>Delete</a>
        </Space>
      ),
    },
  ];
  
function TableList() {
    const [data,setData] = useState([])
    const [sliceData,setsliceData] = useState([])
    useEffect(()=>{
        (async()=>{
            const data= await axios.get("/table")
            setData(data.data.list)
            setsliceData(data.data.list.slice(0,5))
        })()
    },[])

    const set_page=(page, pageSize)=>{
        let list= []
        list = data.slice((page-1)*pageSize,page*pageSize)
        setsliceData(list)
    }
    let my_props = {
        data,
        set_page
    }
    return (
        <div className="TableList">
           
            {
                data&&<Table pagination={false} columns={columns} dataSource={sliceData} />
            }
             <My_pagination {...my_props}/>
            </div>
    )
}

export default TableList
